<template>
	<view>
		<u-navbar :bgColor="bgColor" :titleStyle="{color: color}" title="商品详情">
			<view
				:style="{opacity: loading ? 0 : 1}"
				class="u-nav-slot u-border-top1 u-border-right u-border-bottom u-border-left"
				slot="left"
			>
				<u-icon
					name="arrow-left"
					size="20"
					color="#000"
					@click="back('back')"
				></u-icon>
				<u-line
					direction="column"
					:hairline="false"
					length="16"
					margin="0 8px"
				></u-line>
				<u-icon
					name="home"
					size="24"
					color="#000"
					@click="back('home')"
				></u-icon>
			</view>
		</u-navbar>
		<scroll-view scroll-with-animation :scroll-into-view="intoView" @scroll="handleScroll" :scroll-y="true" :style="{height: scrollViewHeight}">
			<template v-if="loading">
				<view style="padding: 32rpx;">
					<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="7" v-for="i in 6" :key="i"></u-skeleton>
				</view>
			</template>
			<template v-else>
				<TopBanner :detail="detail" height="530rpx" id="top"/>
				<view class="shop-detail-content">
					<view class="detail-top">
						<view class="detail-top-price">
							<text class="detail-top-price-1">&yen;{{detail.price}}</text>
							<text class="detail-top-price-2">原价: &yen;{{detail.oldPrice}}</text>
						</view>
						<view style="flex: 1;text-align: right;">
							<button open-type="share" style="text-align: right;" class="u-reset-button">
								<text style="font-size: 36rpx;color: #000000;" class="iconfont icon-fenxiang"></text>
							</button>
						</view>
					</view>
					<view class="detail-top-1" v-if="couponList.length>0">
						<view>
							<u-tag :color="appColor" :borderColor="appColor" :text="`满${curCoupon.lowCashPrice}减${curCoupon.discount}`" plain size="mini"></u-tag>
						</view>
						<view class="detail-top11" :style="{color: appColor}" @click="couponShow = true">
							<text style="padding-right: 8rpx;">查看</text>
							<text style="font-size: 28rpx;position: relative;top: 1rpx;" class="iconfont icon-youjiantou"></text>
						</view>
					</view>
					<view class="detail-top-2 u-line-2">{{detail.goodsName}}</view>
					<view class="detail-top-3">{{detail.sellingPoint || ''}}</view>
				</view>
				<view class="shop-detail-content">
					<view class="detail-mid">
						<view class="detail-mid-box u-border-bottom" @click="toBuy(1)">
							<view class="detail-mid-1">已选</view>
							<view class="detail-mid-2">{{isSku ? sku.sku : sku.goodsName}}{{`，x${sku.count || 1}`}}</view>
							<view class="detail-mid-3">
								<text class="iconfont icon-menu"></text>
							</view>
						</view>
						<view class="detail-mid-box u-border-bottom" @click="chooseAddress">
							<view class="detail-mid-1">送至</view>
							<view class="detail-mid-2">{{curAddress.id ? curAddress.region + curAddress.address : '未选择配送地址'}}</view>
							<view class="detail-mid-3">
								<text class="iconfont icon-menu"></text>
							</view>
						</view>
						<view class="detail-mid-box" @click="serviceShow = true">
							<view class="detail-mid-1">服务</view>
							<view class="detail-mid-2" style="display: flex;flex-wrap: wrap;">
								<view v-for="service in detail.serviceList" :key="service.id" style="display: flex;align-items: center; margin-right: 16rpx;">
									<text :style="{color: appColor}" class="iconfont icon-anquanfuwu"></text>
									<text style="font-size: 24rpx;color: #666;padding-left: 8rpx;">{{service.name}}</text>
								</view>
							</view>
							<view class="detail-mid-3">
								<text class="iconfont icon-menu"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="shop-review">
					<view class="shop-tuijian-title">
						<view style="display: flex;align-items: center;font-weight: bold;">
							<text>评价</text>
							<text v-if="reviewTotal>0" style="font-size: 28rpx;padding-left: 16rpx;">共{{reviewTotal >= 99 ? '99+' : reviewTotal}}条</text>
						</view>
						<view @click="toMoreReview" style="display: flex;align-items: center;font-size: 24rpx;color: #666;" v-if="reviewTotal>0">
							<text>好评率{{reviewList[0] && reviewList[0].praiseRate}}%</text>
							<text v-if="reviewTotal > 3" style="color: #000000;" class="iconfont icon-youjiantou"></text>
						</view>
					</view>
					<template v-for="(review, index2) in reviewList">
						<view class="shop-review-title" :key="review.id">
							<view style="display: flex;align-items: center;">
								<u--image shape="circle" mode="aspectFill" :src="review.avatar" width="48rpx" height="48rpx"></u--image>
								<text style="padding: 0 8rpx;font-size: 24rpx;line-height: 24rpx;color: #333;">{{review.memberName}}</text>
								<u-rate :readonly="true" :activeColor="appColor" gutter="0" size="14" :count="5" :allowHalf="true" :value="review.score"></u-rate>
							</view>
							<text style="color: #666;font-size: 24rpx;line-height: 24rpx;">{{review.createTime.slice(0, 10)}}</text>
						</view>
						<view class="u-line-2" style="font-size: 28rpx;color: #000000;margin: 16rpx 0;">{{review.content}}</view>
						<u-scroll-list style="padding-bottom: 0;" :indicatorWidth="0" :enable-flex="true" :indicatorActiveColor="appColor">
							<view class="scroll-list" style="flex-direction: row;">
								<view @click="previewImg(index, review.image)"  :style="{marginRight: review.image.length - 1 === index ? 0 : '16rpx'}" class="tj-item" v-for="img in review.image" :key="img.id">
									<u--image radius="16rpx" mode="aspectFill" :src="img.url" width="160rpx" height="160rpx"></u--image>
								</view>
							</view>
						</u-scroll-list>
						<view class="u-border-bottom" v-if="index2 !== reviewList.length-1"/>
					</template>
					<view style="padding-bottom: 32rpx;" v-if="reviewTotal===0">
						<u-empty
						    mode="comment"
							icon="http://cdn.uviewui.com/uview/empty/comment.png"
						>
						</u-empty>
					</view>
					<view style="width: 300rpx;margin: 0 auto;padding-bottom: 32rpx;" v-if="reviewTotal > 3">
						<u-button text="确定" shape="circle" block @click="toMoreReview">查看全部评价</u-button>
					</view>
				</view>
				<view class="shop-tuijian" v-if="tjList.length > 0">
					<view class="shop-tuijian-title">推荐商品</view>
					<u-scroll-list :indicatorWidth="tjList.length < 3 ? 0 : 50" :enable-flex="true" :indicatorActiveColor="appColor">
						<view class="scroll-list" style="flex-direction: row;">
							<view @click="toDetail(tj)" :style="{marginRight: tjList.length - 1 === index ? 0 : '16rpx'}" class="tj-item" v-for="tj in tjList" :key="tj.id">
								<u--image radius="16rpx" mode="aspectFill" :src="tj.image[0].url" width="200rpx" height="200rpx"></u--image>
								<view class="u-line-2" style="font-size: 24rpx;color: #000000;">{{tj.goodsName}}</view>
								<view style="color: #f40215;font-size: 28rpx;">&yen;{{tj.price}}</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
				<template v-if="detail.goodsDesc">
					<view>
						<view style="width: 60%;margin: 0 auto;">
							<u-divider text="商品详情" textColor="#000"></u-divider>
						</view>
					</view>
					<u-parse :content="detail.goodsDesc"></u-parse>
				</template>
				<u-back-top @click="intoView = 'top'" :scroll-top="scrollTop"></u-back-top>
			</template>
		</scroll-view>
		<view class="good-detail-bootom" v-if="!loading">
			<view style="margin: 0 16rpx;height: 100%;width: calc(100vw - 32rpx);display: flex;align-items: center;">
				<view class="good-detail-bootom-l1">
					<button style="position: relative;top: 4rpx;" class="u-reset-button" >
						<u-icon :color="appColor" name="home-fill" size="26"></u-icon>
					</button>
					<button style="position: relative;top: -4rpx;" class="u-reset-button" >
						<text style="font-size: 24rpx; color: #666;">首页</text>
					</button>
				</view>	
				<view class="good-detail-bootom-l1">
					<button style="position: relative;top: 4rpx;" class="u-reset-button" open-type="contact">
						<u-icon :color="appColor" name="server-man" size="26"></u-icon>
					</button>
					<button style="position: relative;top: -4rpx;" class="u-reset-button" open-type="contact">
						<text style="font-size: 24rpx; color: #666;">客服</text>
					</button>
				</view>	
				<view class="good-detail-bootom-l1" style="position: relative;" @click="toCart">
					<view style="display: inline-block;position: absolute;right: 0;top: 0;">
						<u-badge :bgColor="appColor" max="99" :value="cartCount === -1 ? 0 : cartCount"></u-badge>
					</view>
					<button style="position: relative;top: 4rpx;" class="u-reset-button">
						<u-icon :color="appColor" name="shopping-cart-fill" size="30"></u-icon>
					</button>
					<button style="position: relative;top: -8rpx;" class="u-reset-button">
						<text style="font-size: 24rpx; color: #666;">购物车</text>
					</button>
				</view>
				<view class="good-detail-bootom-r">
					<view class="good-detail-bootom-r-btn">
						<u-button @click="toBuy(0)" :color="appColor" text="加入购物车" shape="circle"></u-button>
					</view>
					<view style="width: 32rpx;"/>
					<view class="good-detail-bootom-r-btn">
						<u-button @click="toBuy(1)" :color="appColor" text="立即购买" shape="circle"></u-button>
					</view>
				</view>
			</view>	
		</view>
		<!-- 服务弹窗 -->
		<u-popup mode="bottom" @close="couponShow = false" :show="couponShow" :round="10" closeable>
			<view class="agree-box">
				<view class="agree-title">优惠</view>
				<scroll-view class="agree-content" :scroll-y="true">
					<view v-for="coupon in couponList" :key="coupon.id" style="margin-bottom: 16rpx;">
						<view style="display: flex;align-items: center;">
							<text style="font-size: 28rpx;color: #000;padding-left: 8rpx;padding-bottom: 16rpx;">促销</text>
						</view>
						<view style="padding-bottom: 16rpx;color: #999;font-size: 24rpx;padding-top: 4rpx;display: flex;align-items: center;justify-content: space-between;">
							<view style="display: flex;align-items: center;font-size: 24rpx;line-height: 24rpx;">
								<view :style="{padding: '4rpx',border: `1px solid ${appColor}`, color: appColor, borderRadius: '8rpx', marginRight: '16rpx'}" >满减券</view>
								<text>{{`满${coupon.lowCashPrice}元可减${coupon.discount}元`}}</text>
							</view>
							<view @click="toGet(coupon)" style="display: flex;align-items: center;font-size: 28rpx;line-height: 28rpx;">
								<text :style="{color: coupon.allowReceive ? appColor : '#999'}">{{coupon.allowReceive ? '领取' : '不可领取'}}</text>
								<!-- <text class="iconfont icon-youjiantou"></text> -->
							</view>
						</view>
					</view>
				</scroll-view>
				<view style="height: 32rpx;"></view>
				<view class="agree-btn">
					<u-button @click="couponShow = false" :color="appColor" type="primary" text="确定" shape="circle" block></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 服务弹窗 -->
		<u-popup mode="bottom" @close="serviceShow = false" :show="serviceShow" :round="10" closeable>
			<view class="agree-box">
				<view class="agree-title">服务</view>
				<scroll-view class="agree-content" :scroll-y="true">
					<view v-for="service in detail.serviceList" :key="service.id" style="margin-bottom: 16rpx;">
						<view style="display: flex;align-items: center;">
							<text :style="{color: appColor}" class="iconfont icon-anquanfuwu"></text>
							<text style="font-size: 28rpx;color: #000;padding-left: 8rpx;">{{service.name}}</text>
						</view>
						<view style="color: #999;font-size: 24rpx;padding-top: 4rpx;">{{service.content}}</view>
					</view>
				</scroll-view>
				<view style="height: 32rpx;"></view>
				<view class="agree-btn">
					<u-button @click="closeAgreeShow" :color="appColor" type="primary" text="确定" shape="circle" block></u-button>
				</view>
			</view>
		</u-popup>
		<echone-sku
			v-if="isSku"
			:show="popupShow" 
			 mode="forbidden"
			:theme-color="appColor" 
			:combinations="detail.goodsSku" 
			:specifications="detail.goodsSkuAttr" 
			:default-select-index="selectedIndex" 
			:combinations-props="combinationsProps"
			:specifications-props="specificationsProps"
			@close="handleClose" 
			@confirm="handleConfirm"
		></echone-sku>
		<echone-sku1
			v-if="!isSku"
			:show="popupShow1" 
			 mode="forbidden"
			:theme-color="appColor" 
			@close="handleClose" 
			@confirm="handleConfirm"
			:info="detail"
		></echone-sku1>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex';
	import {shopDetail, recommendList, goodsCommentList, getCouponList, addCart} from '@/api/shop.js';
	import {memberAddress, receive} from '@/api/me.js';
	import TopBanner from '@/components/topBanner';
	import echoneSku from '@/components/echone-sku/echone-sku';
	import echoneSku1 from '@/components/echone-sku/echone-sku1';
	import {noTokenToLogin} from '@/utils/index.js';
	import {getToken} from '@/utils/auth.js';
	export default {
		components: {
			TopBanner,
			echoneSku,
			echoneSku1
		},
		data() {
			return {
				couponShow: false,
				popupShow: false,
				popupShow1: false,
				combinationsProps: {
					id: 'id',
					value: 'sku',
					image: 'image',
					price: 'price',
					stock: 'stock'
				},
				specificationsProps: {
					id: 'name',
					list: 'item',
					name: 'name'
				},
				selectedIndex: 0,
				serviceShow: false, // 服务弹窗
				intoView: '',
				scrollTop: 0,
				color: 'transparent',
				bgColor: 'transparent',
				tjList: [],
				loading: true,
				reviewList: [],
				reviewTotal: 0,
				sku: {}, // 当前选中sku
				isSku: false, // 是否是sku
				type: 0, // 0加入购物车 1购物
				couponList: [], // 优惠券
				curCoupon: {}, // 当前优惠券
				goodsId: undefined // 当前商品id
			}
		},
		computed: {
			...mapState(['detail', 'appInfo', 'userInfo', 'curAddress', 'cartCount']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 50 + this.statusBarHeight + 'px';
			},
		},
		watch: {
			scrollTop(val) {
				if(val === 0) {
					this.intoView = '';
				}
			}
		},
		onShareAppMessage () {
			const {image, goodsName, introduction, id} = this.detail;
			return {
				title: '[好友推荐]' + goodsName,
				path: `/pages/shop/shopDetail?id=${id}`,
				imageUrl: image[0].url,
				content: introduction,
				desc: introduction,
				success: res => {
					console.info(res)
				}
			}
		},
		methods: {
			...mapActions(['setActiveTabbar', 'setDetail', 'setCurAddress', 'setCartCount', 'setCartDetail']),
			// 更多评价
			toMoreReview() {
				this.$cuNavigateTo('/pages/shop/review?goodsId=' + this.goodsId);
			},
			// 领取优惠券
			toGet({id, allowReceive}) {
				noTokenToLogin(false).then(() => {
					console.log('未登录');
				}).catch(() => {
					if(!allowReceive) return;
					receive({couponId:id}).then(res => {
						const {success, message} = res;
						if(success) {
							this.$cuTip('领取成功');
							this.couponShow = false;
						} else {
							this.$cuTip(message);
							this.couponShow = false;
						}
					})
				});
			},
			// 前往购物车
			toCart() {
				let url = '/pages/shop/shopCart'
				this.$cuNavigateTo(url);
			},
			// 添加购物车
			addCart() {
				let obj = {};
				if(this.isSku) {
					obj.buyCount = this.sku.count;
					obj.goodsId = this.sku.goodsId;
					obj.goodsSku = this.sku;
				} else {
					obj.buyCount = this.sku.count;
					obj.goodsId = this.sku.id;
				}
				addCart(obj).then(res => {
					this.$cuTip('加入购物车成功');
					this.setCartCount({cartCount: res.result});
					this.handleClose();
				})
			},
			// 预览图片
			previewImg(current, urls) {
				urls = urls.map(item => item.url);
				uni.previewImage({
					current,
					urls,
				});
			},
			// 购买
			toBuy(type) {
				this.type = type;
				if(this.isSku) {
					this.popupShow = true;
				} else {
					this.popupShow1 = true;
				}
			},
			// 下单
			toOrder() {
				let cartDetail = [];
				let postObj = uni.$u.deepClone(this.sku);
				let obj = {}
				obj.goodsId = this.detail.id;
				obj.buyCount = postObj.count;
				obj.goodsName = this.detail.goodsName;
				obj.price = postObj.price;
				obj.image = this.detail.image;
				if(this.isSku) {
					obj.sku = postObj
				}
				cartDetail.push(obj);
				this.handleClose();
				this.setCartDetail({cartDetail});
				let url = '/pages/shop/shopOrder'
				this.$cuNavigateTo(url);
			},
			handleClose() {
				this.popupShow = false;
				this.popupShow1 = false;
			},
			handleConfirm(obj) {
				this.sku = obj;
				noTokenToLogin(false).then(() => {
					console.log('未登录');
				}).catch(() => {
					//下一步操作
					// 购物车
					if(this.type === 0) {
						this.addCart()
					// 购物	
					} else {
						this.toOrder()
					}
				});
			},
			// 关闭服务
			closeAgreeShow() {
				this.serviceShow = false;
			},
			// 选择地址
			chooseAddress() {
				let url = '/pages/me/address?choose=1';
				this.$cuNavigateTo(url);
			},
			handleScroll({detail}) {
				this.intoView = '';
				this.scrollTop = detail.scrollTop;
				if (detail.scrollTop > 100) {
					this.color = '#000';
					this.bgColor = '#fff';
				} else {
					this.color = 'transparent';
					this.bgColor = 'transparent';
				}
			},
			// 返回
			back(type) {
				if(type === 'back') {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.reLaunch({
						url: '/pages/startup'
					})
				}
				
			},
			// 详情页面
			toDetail({id, goodsCategory}) {
				uni.navigateTo({
					url: `/pages/shop/shopDetail?id=${id}&goodsCategory=${goodsCategory}`
				});
			},
		},
		onLoad({id, goodsCategory}) {
			this.goodsId = id;
			// 判断用户是否登录
			let isLogin = !getToken() && (Object.keys(this.userInfo).length == 0)
			// 未登录
			if(isLogin) {
				this.setCurAddress({curAddress: {}})
			} else {
				memberAddress().then(res => {
					let cur = res.result.records[0];
					if(cur) {
						this.address = cur.region + cur.address;
						this.setCurAddress({curAddress: cur})
					} else {
						this.setCurAddress({curAddress: {}})
					}
				})
				// 优惠券
				getCouponList({category: '2', goodsId: id}).then(res => {
					let couponList = res.result.records;
					this.couponList = couponList
					if(couponList.length > 0) {
						let max = couponList[0];
						couponList.forEach(item => {
							if(max.discount < item.discount) {
								max = item
							}
						})
						this.curCoupon = max;
					} else {
						this.curCoupon = {}
					}
				})
			}
			// 详情
			this.loading = true;
			shopDetail({id}).then(res => {
				this.setDetail({detail: res.result});
				if(res.result.isSku === '1') {
					this.sku = res.result.goodsSku[this.selectedIndex];
					this.isSku = true;
				} else {
					this.sku = res.result
					this.isSku = false;
				}
			}).finally(() => {
				this.loading = false
			})
			// 评论
			goodsCommentList({goodsId: id, pageNo: 1, pageSize: 3}).then(res => {
				this.reviewList = res.result.records;
				this.reviewTotal =  res.result.total;
			})
			// 推荐
			recommendList({goodsCategory,id}).then(res => {
				this.tjList = res.result
			})
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.agree-box {
		padding: 16rpx 32rpx;
		.agree-title {
			height: 72rpx;
			text-align: center;
			line-height: 72rpx;
			font-size: 32rpx;
			color: #000;
		}
		.agree-content {
			height: 640rpx;
			font-size: 26rpx;
			color: #333;
		}
	}
	.u-nav-slot {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 100px;
		padding: 3px 7px;
	}
	.scroll-list {
		@include flex(column);
	}

	.shop-detail-content {
		padding: 32rpx;
		margin-bottom: 16rpx;
		background-color: #fff;
		.detail-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.detail-top-price {
				display: flex;
				align-items: center;
				.detail-top-price-1 {
					line-height: 44rpx;
					font-size: 44rpx;
					color: #f40215;
				}
				.detail-top-price-2 {
					font-size: 28rpx;
					line-height: 28rpx;
					color: #999;
					padding-left: 16rpx;
				}
			}
		}
		.detail-top-1 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 0;
			.detail-top11 {
				font-size: 24rpx;
			}
		}
		.detail-top-2 {
			color: #000;
			font-size: 28rpx;
			margin-bottom: 16rpx;
		}
		.detail-top-3 {
			color: #999;
			font-size: 24rpx;
		}
		.detail-mid {
			.detail-mid-box {
				display: flex;
				padding: 32rpx 0;
				.detail-mid-1 {
					width: 88rpx;
					font-size: 28rpx;
					color: #000;
				}
				.detail-mid-2 {
					flex: 1;
					font-size: 26rpx;
					color: #333;
				}
				.detail-mid-3 {
					width: 72rpx;
					text-align: right;
				}
			}
		}
	}
	.shop-tuijian {
		padding: 32rpx;
		background-color: #fff;
		.shop-tuijian-title {
			font-size: 32rpx;
			line-height: 32rpx;
			color: #333;
			margin-bottom: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.tj-item {
			width: 200rpx;
		}
	}
	.shop-review {
		padding: 32rpx;
		padding-bottom: 0;
		background-color: #fff;
		margin-bottom: 16rpx;
		.shop-tuijian-title {
			font-size: 32rpx;
			line-height: 32rpx;
			color: #333;
			margin-bottom: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.shop-review-title {
			margin-top: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);     /*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);  /*兼容 iOS>11.2*/
		box-sizing: content-box;
		.good-detail-bootom-l1 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-right: 48rpx;
		}
		.good-detail-bootom-r {
			flex: 2;
			display: flex;
			.good-detail-bootom-r-btn {
				flex: 1;
			}
		}
	}
</style>
